'use strict'
import { View } from '../../component'
import style from './css.css'
import { observer, inject } from 'mobx-react'

function getRootOffset (ele) {
  if (!ele || ele.nodeName === 'HTML') {
    return { top: 0, left: 0 }
  }
  let offTop = 0
  let offLeft = 0
  offTop = ele.offsetTop + getRootOffset(ele.offsetParent).top
  offLeft = ele.offsetLeft + getRootOffset(ele.offsetParent).left
  return { top: offTop, left: offLeft }
}

@inject('user', 'list') @observer class FlyGold extends React.Component {
  static propTypes = {
    user: PropTypes.object,
    list: PropTypes.object,
    onAnimateEnd: PropTypes.func
  }

  state = {
    zoom: false,
    rotate: false
  }

  userHeaderPos = {}
  cloneGoldCount = 0
  _handleGoldTransitionEnd = this._handleGoldTransitionEnd.bind(this)

  componentDidMount () {
  }

  componentWillUpdate () {
    if (this.props.user.sigShow === 1 && !this.state.zoom) {
      // if (this.props.list.isSign === 1) {
      //   return
      // }
      this.setState({ zoom: true })
      this._getUserHeaderPos()
    }
  }

  _getUserHeaderPos () {
    const userHeader = window.document.querySelector('.' + style.userHeader)
    this.userHeaderPos = getRootOffset(userHeader)
    this.userHeaderPos.width = userHeader.clientHeight
  }

  _handleGoldTransitionEnd () {
    this.setState({ rotate: true })
    this._createFlyingAnimation()
  }

  _createFlyingAnimation () {
    for (let index = 1; index <= 7; index++) {
      ((i) => {
        setTimeout(() => {
          this._createFlyingGold()
        }, i * 200)
      })(index)
    }
  }

  _createFlyingGold () {
    const self = this
    this.cloneGoldCount++
    const baseGoldP = window.document.querySelector('.' + style.flyGold)
    const baseGold = baseGoldP.querySelector('.' + style.flyGoldItem)
    const cloneGold = baseGold.cloneNode()
    const pos = getRootOffset(baseGold)
    cloneGold.style.position = 'fixed'
    cloneGold.style.top = pos.top + 'px'
    cloneGold.style.left = pos.left + 'px'
    cloneGold.classList.remove(style.flyGoldItemRotate)
    cloneGold.classList.add(style.flyingGoldItem)
    cloneGold.addEventListener('transitionend', function () {
      if (this !== null && this.parentNode !== null) {
        this.parentNode.removeChild(this)
        if (baseGold.parentNode !== null && self.cloneGoldCount === 7) {
          baseGoldP.removeChild(baseGold)
          self.props.onAnimateEnd && self.props.onAnimateEnd()
        }
      }
    })
    baseGoldP.appendChild(cloneGold)

    cloneGold.offsetHeight

    cloneGold.style.top = (this.userHeaderPos.top + this.userHeaderPos.width / 3) + 'px'
    cloneGold.style.left = (this.userHeaderPos.left + this.userHeaderPos.width / 3) + 'px'
    cloneGold.style.transform = 'scale(0.2)'
  }

  render () {
    const { sigShow } = this.props.user.sigShow
    return (
      <View className={style.flyGold}>
        <View className={`${style.flyGoldShine} ${this.state.zoom ? style.flyGoldShineZoom : ''}`}></View>
        <View
          transitionEnd={this._handleGoldTransitionEnd}
          className={`${style.flyGoldItem} ${this.state.zoom ? style.flyGoldItemZoom : ''} ${this.state.rotate ? style.flyGoldItemRotate : ''}`}>
        </View>
      </View>
    )
  }
}

export default FlyGold
